<template>
  <div class="dashboard">
        <el-main>
          <div class="first">
            <div class="left">
              <div class="top">
                <div class="l1">
                  <div class="head">
                    <p>
                      工单统计 <span>{{ time1 }} ~ {{ time2 }}</span>
                    </p>
                  </div>
                  <div class="footer">
                    <div>
                      <div class="t1">{{ task.total }}</div>
                      <div class="t2">工单总数(个)</div>
                    </div>
                    <div>
                      <div class="t1">{{ task.completedTotal }}</div>
                      <div class="t2">完成工单(个)</div>
                    </div>
                    <div>
                      <div class="t1">{{ task.progressTotal }}</div>
                      <div class="t2">进行工单(个)</div>
                    </div>
                    <div>
                      <div class="t1">{{ task.cancelTotal }}</div>
                      <div class="t2">取消工单(个)</div>
                    </div>
                  </div>
                </div>
                <div class="l2">
                  <div class="head1">
                    <p>
                      销售统计 <span>{{ time1 }} ~ {{ time2 }}</span>
                    </p>
                  </div>
                  <div class="footer1">
                    <div>
                      <div class="t1">{{ orderCount }}</div>
                      <div class="t2">订单量(个)</div>
                    </div>
                    <div>
                      <div class="t1">
                        {{ (orderAmount / 10000).toFixed(2) }}
                      </div>
                      <div class="t2">销售额(万元)</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="bottom">
                <div class="header1">
                  <div class="left2">
                    <p>
                      销售数据 <span>{{ time1 }} ~ {{ time2 }}</span>
                    </p>
                  </div>
                  <div class="right2">
                    <div @click="clickFn1()" :class="{ active: show == 1 }">
                      周
                    </div>
                    <div @click="clickFn2()" :class="{ active: show == 2 }">
                      月
                    </div>
                    <div @click="clickFn3()" :class="{ active: show == 3 }">
                      年
                    </div>
                  </div>
                </div>
                <div class="bottom1">
                  <div
                    class="left"
                    style="width: 608px; height: 311px"
                    ref="kunkun"
                  ></div>
                  <div
                    class="right"
                    style="width: 543px; height: 278px"
                    ref="xiaomi"
                  ></div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="head">
                <p>
                  商品热榜<span>{{ time1 }} ~ {{ time2 }}</span>
                </p>
              </div>
              <div class="content">
                <el-row v-for="(item, index) in topList" :key="item.id">
                  <el-col :span="4"
                    ><div class="grid-content bg-purple">
                      {{ index + 1 }}
                    </div></el-col
                  >
                  <el-col :span="14"
                    ><div class="grid-content bg-purple-light">
                      {{ item.skuName }}
                    </div></el-col
                  >
                  <el-col :span="6"
                    ><div class="grid-content bg-purple">
                      {{ item.count }}单
                    </div></el-col
                  >
                </el-row>
              </div>
            </div>
          </div>

          <div class="second">
            <div class="left">
              <div class="header">
                <p>合作商点位数Top5</p>
                <div class="icon">
                  <i class="el-icon-more" size="16px"></i>
                </div>
              </div>
              <div class="bottom">
                <div class="left1" ref="akun"  style="width: 520px; height: 284px"></div>
                <div class="right1">
                  <div class="div1">
                    {{count}}
                    <div>点位数</div>
                  </div>

                  <div class="div2">
                    {{partnersCount}}
                    <div>合作商数</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="header">
                <p>异常设备监控</p>
                <div class="icon">
                  <i class="el-icon-more" size="16px"></i>
                </div>
              </div>
              <div class="bottom">
                <img
                  src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                  alt=""
                />
                <div class="tips">暂无数据</div>
              </div>
            </div>
          </div>
        </el-main>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import * as echarts from 'echarts'
const moment = require('moment')
export default {
  name: 'dashboard-page',
  data () {
    return {
      end: moment().startOf('month').format('YYYY-MM-DD+00:00:00'),
      start: moment().subtract(0, 'days').format('YYYY-MM-DD+23:59:59'),
      show: 1
    }
  },
  computed: {
    ...mapState('user', ['userName', 'time1', 'time2']),
    ...mapState('shoppings', ['topList', 'orderAmount', 'orderCount']),
    ...mapState('sales', ['Sales', 'Spread']),
    ...mapGetters(['task', 'partnersTop', 'count', 'partnersCount'])

  },

  methods: {
    clickFn1 () {
      this.show = 1
      this.$store.dispatch('sales/getWeek')
    },
    clickFn2 () {
      this.show = 2
      this.$store.dispatch('sales/getMonth')
    },
    clickFn3 () {
      this.show = 3
      this.$store.dispatch('sales/getYear')
    },
    leftFunction () {
      const myEcharts = echarts.init(this.$refs.kunkun)
      const option = {
        title: {
          text: '销售额趋势图',
          left: 'center',
          textStyle: {
            fontSize: 14
          }
        },
        xAxis: {
          type: 'category',
          data: this.Sales.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: this.Sales.series,
            type: 'line',
            smooth: true,
            color: '#ff6565',
            lineStyle: {
              width: 4
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(253, 192, 192,0.7)'
                },
                {
                  offset: 1,
                  color: 'rgba(253, 192, 192,0.1)'
                }
                ], false),
                shadowColor: 'rgba(253, 192, 192, 0.7)',
                shadowBlur: 20
              }
            }
          }

        ],
        grid: {
          left: '16%'
        }
      }
      myEcharts.setOption(option)
    },
    rightFunction () {
      const myEcharts1 = echarts.init(this.$refs.xiaomi)
      myEcharts1.setOption({
        title: {
          text: '销售额分布',
          left: 'center',
          textStyle: {
            fontSize: 14
          }
        },
        xAxis: {
          type: 'category',
          data: this.Spread.xAxis,
          lineStyle: {
            width: 1
          }
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: this.Spread.series,
            type: 'bar',
            barWidth: '20%'
          }
        ],
        grid: {
          left: '18%',
          bottom: '21%'
        }
      })
    },
    bottomFunction () {
      const myEcharts1 = echarts.init(this.$refs.akun)
      myEcharts1.setOption(
        {
          tooltip: {
            show: true
          },
          series: [
            {
              name: 'Nightingale Chart',
              type: 'pie',
              radius: [40, 100],
              center: ['50%', '50%'],
              roseType: 'radius',
              data: this.partnersTop
            }
          ]
        }
      )
    }

  },

  watch: {
    Sales: {
      deep: true,
      handler () {
        if (this.$refs.kunkun) {
          this.leftFunction()
          this.rightFunction()
          this.bottomFunction()
        }
      }
    }
  },

  async created () {
    this.$store.dispatch('shoppings/getTopShoppings', [this.time1, this.time2])
    this.$store.dispatch('shoppings/getAmount')
    this.$store.dispatch('shoppings/getCmount')
    this.$store.dispatch('shoppings/getTask', [this.time1, this.time2])
    this.$store.dispatch('sales/getWeek')
    this.$store.dispatch('partners/getpartner')
    this.$store.dispatch('partners/getCount')
    this.$store.dispatch('partners/getPartnerCount')
  }

}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.dashboard {
  height: 100%;
    .el-main {
      width: 100%;
      height: 100%;
      transition: margin-left 0.28s;
      padding-top: 60px;
      margin-top: 20px;
      margin-left: 167px;
      position: relative;
      background-color: #f8fafd;
      .first {
        width: 100%;
        display: flex;
        .left {
          margin-left: 20px;
          width: 1110px;
          height: 538px;
          .top {
            display: flex;
            justify-content: space-between;
            width: 1100px;
            height: 166px;
            padding-right: 10px;
            border-radius: 12px;
            .l1 {
              width: 621px;
              height: 166px;
              background: #e9f3ff;
              border-radius: 20px;
              background-image: url(),
                url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
              background-repeat: no-repeat, no-repeat;
              background-position: 0 0, calc(100% - 12px) 100%;
              .head {
                padding: 20px;
                p {
                  font-size: 16px;
                  font-weight: 600;
                  span {
                    margin-left: 10px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999;
                  }
                }
              }
              .footer {
                display: flex;
                justify-content: space-evenly;
                padding-left: 48px;
                div {
                  width: 140px;
                  height: 80px;
                  text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
                  .t1 {
                    height: 50px;
                    font-size: 36px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    line-height: 50px;
                    color: #072074;
                  }
                  .t2 {
                    height: 17px;
                    margin-top: 3px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #91a7dc;
                    line-height: 17px;
                  }
                }
              }
            }

            .l2 {
              margin-left: 20px;
              width: 505px;
              height: 166px;
              border-radius: 20px;
              background: #fbefe8
                url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png)
                no-repeat calc(100% - 12px) 100%;
              .head1 {
                padding: 20px;
                p {
                  font-size: 16px;
                  font-weight: 600;
                  span {
                    margin-left: 10px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999;
                  }
                }
              }
              .footer1 {
                display: flex;
                justify-content: space-around;
                padding-left: 48px;
                div {
                  width: 140px;
                  height: 80px;
                  text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
                  .t1 {
                    height: 50px;
                    font-size: 36px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    line-height: 50px;
                    color: #ff5757;
                  }
                  .t2 {
                    height: 17px;
                    margin-top: 3px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #de9690;
                    line-height: 17px;
                  }
                }
              }
            }
          }

          .bottom {
            margin-top: 20px;
            width: 1091px;
            height: 352px;
            background-color: #fff;
            border-radius: 20px;
            overflow: hidden;
            .header1 {
              display: flex;
              justify-content: space-between;
              margin: 20px;
              .left2 {
                p {
                  font-size: 16px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #333;

                  span {
                    margin-left: 10px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999;
                  }
                }
              }
              .right2 {
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 130px;
                height: 34px;
                background-color: #f7fbff;
                div {
                  cursor: pointer;
                  color: #a8a3bb;
                }
                .active {
                  padding: 0 8px;
                  background-color: pink;
                  color: black;
                }
              }
            }
            .bottom1 {
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              .left {
                margin-left: 20px;
              }
            }
          }
        }

        .right {
          margin-left: 10px;
          width: 362px;
          height: 538px;
          background-color: #fff;
          border-radius: 20px;
          .head {
            padding: 10px 20px;
            p {
              font-size: 16px;
              font-weight: 600;
              span {
                margin-left: 10px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999;
              }
            }
          }
          .content {
            margin: 0 20px;
            margin-top: 20px;
            height: 468px;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-box-flex: 1;
            flex: 1;
            flex-direction: column;
            -webkit-box-pack: justify;
            justify-content: space-between;
            .bg-purple {
              margin-left: 20px;
            }
            .bg-purple-light {
              margin-left: 20px;
            }
          }
        }

        ::-webkit-scrollbar {
          width: 0 !important;
          /*滚动条宽度*/
          height: 7px;
          /*滚动条高度*/
          background-color: rgb(0, 12, 46);
        }
      }

      .second {
        display: flex;
        margin-top: 20px;
        width: 100%;
        height: 353px;
        .left {
          margin-left: 20px;
          padding: 20px;
          width: 850px;
          height: 353px;
          background-color: #fff;
          border-radius: 20px;
          .header {
            display: flex;
            justify-content: space-between;
            p {
              font-size: 16px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #333;
            }
            .icon {
              width: 23px;
              height: 22px;
              border: 1px solid #5f84ff;
              border-radius: 50%;
              cursor: pointer;
              .el-icon-more {
                display: block;
                text-align: center;
                line-height: 20px;
                color: #5f84ff;
              }
            }
          }
          .bottom {
            display: flex;
            .left1 {
              margin-top: 20px;
              width: 520px;
              height: 284px;
              background-color: #fff;
            }
            .right1 {
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-top: 40px;
              margin-left: 20px;
              width: 154px;
              height: 230px;
              padding-left: 38px;
              background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
                linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
                linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
                linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
              background-size: 50% 50%;
              background-repeat: no-repeat;
              .div1 {
                margin-bottom: 30px;
                font-size: 24px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #072074;
              }
              .div2 {
                font-size: 24px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #072074;
              }
              div {
                margin-top: 10px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000412;
              }
            }
          }
        }
        .right {
          padding: 20px;
          margin-left: 33px;
          width: 600px;
          background-color: #fff;
          border-radius: 20px;
          .header {
            display: flex;
            justify-content: space-between;
            p {
              font-size: 16px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #333;
            }
            .icon {
              width: 23px;
              height: 22px;
              border: 1px solid #5f84ff;
              border-radius: 50%;
              cursor: pointer;
              .el-icon-more {
                display: block;
                text-align: center;
                line-height: 20px;
                color: #5f84ff;
              }
            }
          }
          .bottom {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 295px;
            .tips {
              margin-top: 25px;
              color: #20232a;
              font-size: 14px;
            }
          }
        }
      }
    }

}
</style>
